<template>
  <div>
    <Modal
      :styles="{top: '40px'}"
      :value="value"
      @on-ok="handleOkClick"
      @on-visible-change="handleVisibleChange"
      loading
      title="选择人员"
      width="780"
    >
      <div class="search-form-wrapper">
        <Form :model="form" class="search-form" inline ref="searchForm">
          <div>
            <FormItem prop="dwName">
              <Input placeholder="请输入公司名称" v-model="form.dwName" />
            </FormItem>
            <FormItem prop="userName">
              <Input placeholder="请输入人员姓名" v-model="form.userName" />
            </FormItem>
          </div>
          <FormItem>
            <Button @click="handleSearchClick" type="primary">查询</Button>
            <Button @click="handleResetForm">重置</Button>
          </FormItem>
        </Form>
      </div>
      <Table
        :columns="tableColumns"
        :data="data"
        @on-current-change="handleSelectChange"
        border
        highlight-row
        ref="tableRef"
      ></Table>

      <div class="page-wrapper clearfix">
        <Page
          :current="page"
          :total="total"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
          show-sizer
          show-total
          size="small"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { getApproverLit } from '@/api/message.js';

export default {
  model: {
    prop: 'value',
    event: 'on-visible-change'
  },
  props: {
    value: Boolean
  },
  data () {
    return {
      form: {
        dwName: '',
        userName: ''
      },

      tableColumns: [
        {
          title: '单位名称',
          key: 'dwName',
          align: 'center'
        },
        {
          title: '部门',
          key: 'deptName',
          align: 'center'
        },
        {
          title: '岗位',
          key: 'jobName',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'userName',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'phone',
          align: 'center'
        },
        {
          title: '是否认证',
          key: 'state',
          align: 'center'
        }
      ],
      data: [
        // {
        //   dwName: '',
        //   deptName: '',
        //   jobName: '',
        //   userName: '',
        //   phone: ''
        // }
      ],

      tableSelection: {}, // 表格单选
      total: 100,
      page: 1,
      pageSize: 10
    };
  },
  watch: {
    // value: {
    //   handler: function (val) {
    //     if (val) {
    //       this.getApproverLit();
    //     }
    //   },
    //   immediate: true
    // }
  },
  mounted () {
    this.getApproverLit();
  },
  methods: {
    async getApproverLit () {
      try {
        const data = {
          pageNum: this.page,
          pageSize: this.pageSize
        };

        if (this.form.userName) {
          data.userName = this.form.userName;
        }
        if (this.form.dwName) {
          data.dwName = this.form.dwName;
        }

        // console.log('人员选择 req=>', data);
        const resp = await getApproverLit(data);
        // console.log('人员选择 res=>', resp);
        const info = resp.data.data;
        this.data = info.list.map((item) => {
          if (item.status === 'AUTH_SUCCESS') {
            item.state = '已认证';
          } else {
            item.state = '未认证';
          }
          return item;
        });
        this.total = info.total;
      } catch (error) {
        console.error(error);
      }
    },
    handleVisibleChange (visible) {
      this.$emit('on-visible-change', visible);
    },
    handleSelectChange (selection) {
      if (selection.status === 'AUTH_SUCCESS') {
        this.tableSelection = selection;
      } else {
        this.$Message.error('该人员未进行电子签名认证，无法进行审批。');
      }
    },
    handleResetForm () {
      this.$refs.searchForm.resetFields();
      this.getApproverLit();
    },
    handleSearchClick () {
      this.getApproverLit();
    },
    handlePageChange (page) {
      this.page = page;
      this.getApproverLit();
    },
    handlePageSizeChange (pageSize) {
      this.pageSize = pageSize;
      this.getApproverLit();
    },
    handleOkClick () {
      this.$emit('on-select-success', this.tableSelection);
      this.$emit('on-visible-change', false);
    }
  }
};
</script>

<style lang="less" scoped>
.search-form {
  display: flex;
  justify-content: space-between;
  /deep/ .ivu-input {
    width: 130px;
  }
  .ivu-btn:first-child {
    margin-right: 10px;
  }
}
/deep/ .ivu-table td {
  height: 40px;
}
/deep/ .ivu-modal-body {
  padding-bottom: 5px;
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
</style>
